jQuery Validation - 表單驗證工具

1. 它是基於jquery的套件，故必須先引入jquery.js，我們主樣版已經引入
2. 這裡希望針對 必填、email、網址、數字，做驗證
3. 未來在結構 form_validate 會設置一個複選 必填|email|網址|數字，管理設定好之後，程式在樣版可以自動處理

安裝

1. 引入CSS、JS

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_zh_TW.min.js"></script>

2. 修正 CSS

<style>
  .error{
    color:red;
  }
</style>

3. 調用函式
   客戶名稱我們將四種驗證都執行，故實際測試時，記得留 必填 即可，看看送出畫面是否出現

<script>
  $(function() {
    $("#myForm").validate({
      submitHandler: function(form) {              //驗證成功執行
        $('#submit').attr('disabled', true);       //關閉送出
        setIdAttribute('main-content', 'd-none');  //關閉主畫面
        setIdAttribute('show', 'my-5');            //開啟loading畫面
        insertData();                              //寫入函式
        document.getElementById('myForm').reset(); //表單重置
        return false;
      },
      rules: {                                     //規則
        "title": {                                 //表單 name
          "required": true,                        //必填
          "email": true,                           //email
          "url": true,                             //網址
          "number": true                           //數字
        }
      },
      messages: {                                  //訊息
        "title": {                                 //表單 name
          "required": "必填",                      //必填
          "email": "Email格式不正確",              //email
          "url": "網址格式不正確",                 //網址
          "number": "數字格式不正確"               //數字
        }
      }
    });
  });

  /*===================================
    寫入函式
  ===================================*/
  function insertData() {
    alert('寫入函式');
  }
  
  /*===============================
  指定 id -> class
  setIdAttribute('main-content','');      //開啟主畫面
  setIdAttribute('show','d-none');        //關閉等待畫面

  setIdAttribute('main-content','d-none');//關閉主畫面
  setIdAttribute('show','my-5');          //開啟等待畫面
  ===============================*/ 
  function setIdAttribute(id, elementClass){
    document.getElementById(id).setAttribute("class", elementClass);
  }
</script>

4. setIdAttribute() 這個函式，很多地方會用到，建議把它移到主樣版，這樣子樣版只要調用即可